<!-- 对 button 组件的编辑 -->
<template>
  <div class="button-edit" v-if="dialogShow">
    <SetDesignDialog :title="name" :dialogVisible="dialogShow" :close="close" :saveclose="saveclose"
      ref="settingDialog">
      <div class="edit-container-u">
        <el-tabs v-model="activeName">
          <el-tab-pane label="设置" name="1">
            <el-form :label-width="formLabelWidth">
              <el-form-item label="显示位置" style="margin-bottom:0px;">
                <el-radio-group v-model="data.config.textAlign">
                  <el-radio :label="'left'">靠左</el-radio>
                  <el-radio :label="'center'">居中</el-radio>
                  <el-radio :label="'right'">靠右</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="显示宽度" :label-width="formLabelWidth" style="margin-bottom: 0px;">
                <el-input @blur="widthBlur" size="mini" style="width:100px;" v-model="data.config.maxWidth"
                  maxlength="12" placeholder="100%"></el-input>
                <span class="spn">px或百分比</span>
              </el-form-item>
              <el-form-item label="搜索按钮" style="margin-bottom:0px;">
                  <el-input size="mini" v-model="data.text" maxlength="50" placeholder="请输入搜索按钮文字" style="width:300px;"></el-input>
              </el-form-item>
              <el-form-item label="输入框提示文字" style="margin-bottom:0px;">
                  <el-input size="mini" v-model="data.placeholderText" maxlength="200" placeholder="请输入提示文字" style="width:300px;"></el-input>
              </el-form-item>
              <el-divider content-position="left" class="divider-u">输入为空弹窗提醒设置</el-divider>
              <el-form-item label="标题" style="margin-bottom:0px;">
                  <el-input size="mini" v-model="data.emptyTextTitle" maxlength="200" placeholder="请输入标题" style="width:300px;"></el-input>
              </el-form-item>
              <el-form-item label="提示内容" style="margin-bottom:0px;">
                  <el-input size="mini" v-model="data.emptyTextMsg" maxlength="300" placeholder="请输入提示内容" style="width:300px;"></el-input>
              </el-form-item>
              <el-form-item label="确认按钮" style="margin-bottom:0px;">
                  <el-input size="mini" v-model="data.emptyTextBtn" maxlength="50" placeholder="请输入确认按钮文字" style="width:300px;"></el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </SetDesignDialog>

    <!-- 选择资源文件 -->
    <ChooseRepertory ref="chooseRepertory" />
  </div>
</template>

<script>
import Color from '@/components/common/design/dialog/component/formitem/Color.vue'
import FontFamily from '@/components/common/design/dialog/component/formitem/FontFamily.vue'
import FontWeight from '@/components/common/design/dialog/component/formitem/FontWeight.vue'
import FontSize from '@/components/common/design/dialog/component/formitem/FontSize.vue'
import FontStyle from '@/components/common/design/dialog/component/formitem/FontStyle.vue'
import SetDesignDialog from '@/components/common/dialog/SetDesignDialog.vue'
import ChooseRepertory from '@/components/common/repertory/ChooseRepertory.vue'
import * as WindowType from '@/config/windowtype.js'
// import * as functions from '@/core/functions.js'
// import * as PubsubType from '@/config/pubsubtype.js'
import VueFunctions from '@/core/VueFunctions.js'
import BackendjsFunctions from '@/core/BackendjsFunctions.js'
import { mapState } from 'vuex'
// import PubSub from 'pubsub-js'
import _ from 'lodash'

export default {
  computed: {
    ...mapState([
      'design'
    ])
  },
  created () {
    VueFunctions.method(WindowType.EDIT_COMPONENT_WITH_COMPONENTSEARCH, (bjComponent) => {
      this.close()
      this.dialogShow = true
      this.bjComponent = bjComponent
      this.data = bjComponent.render.data
      if (this.data && this.data.config && !this.data.config.textAlign) {
        this.data.config.textAlign = 'left'
      }
    })
  },
  mounted () {
  },
  data () {
    return {
      dialogShow: false,
      activeName: '1',
      formLabelWidth: '120px',
      name: '搜索',
      bjComponent: null,
      data: null
    }
  },
  methods: {
    widthBlur () {
      if (/^(\d)+$/.test(this.data.config.maxWidth)) {
        this.data.config.maxWidth = this.data.config.maxWidth + 'px'
      } else if (/^(\d)+(%|px)$/.test(this.data.config.maxWidth)) {
        this.data.config.maxWidth = this.data.config.maxWidth
      } else {
        this.data.config.maxWidth = '100%'
      }
    },
    close () {
      this.dialogShow = false
      this.activeName = '1'
      this.bjComponent = null
      this.data = null
    },
    saveclose () {
      this.bjComponent.render.data = _.cloneDeep(this.data)
      BackendjsFunctions.saveComponent(this.bjComponent)
      this.close()
    }
  },
  components: {
    SetDesignDialog,
    ChooseRepertory,
    Color,
    FontFamily,
    FontWeight,
    FontSize,
    FontStyle
  }
}

</script>

<style scoped lang="scss">
.edit-container-u {
  width: 840px;
  min-height: 410px;
  min-height: calc(100vh - 300px);
}
.spn {
  margin-left: 15px;
  color: #666;
  font-size: 12px;
}
.divider-u /deep/ .el-divider__text{
  color:#999;
}
</style>
